<template>
  <div>
    <el-row type="flex" :gutter="20" style="padding-left: 20px; padding-top: 10px; margin-bottom: 9px">
      <el-col :span="1">
        <el-button type="text" @click="goback"><i class="el-icon-back" style="color: white;font-size: xx-large"></i></el-button>
      </el-col>
      <el-col :span="4">
        <h2 style="margin-top: 12px;margin-left: -25px">新增值班表</h2>
      </el-col>
      <el-col :offset="2" :span="12" style="padding: 20px 20px 15px 0">
        <el-form :inline="true" :model="queryCondition" class="demo-form-inline">
          <el-form-item label="时间：">
            <el-date-picker
              v-model="queryCondition.month"
              type="month"
              placeholder="选择月">
            </el-date-picker>
          </el-form-item>
          <el-button class="el-blue-button" @click="handleCheck(queryCondition.month)"><i class="el-icon-plus"></i>确认添加并保存</el-button>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from '@/network/request'
export default {
  name: 'addDuty',
  data () {
    return {
      duties: [],
      newestDutyId: '',
      queryCondition: {
        month: ''
      },
      daysOfMonth: 31, // 当前月的天数
      year: '', // 表格的年
      month: '', // 表格的月
      isEditable: false,
      edit: false, // 点击修改按钮显示或隐藏删除按钮编辑功能
      newDutyPerson: {
        crew_type: '',
        position: '',
        name: '',
        crew_sub_type: '',
        duty_type: ''
      },
      dialogData: {
        visibleFlag: false,
        dialogTitle: '新增',
        formType: 'add',
        editData: {}
      },
      spanArr0: [],
      spanArr1: [],
      spanArr2: [],
      days28: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13', 'd14', 'd15', 'd16', 'd17', 'd18', 'd19', 'd20', 'd21', 'd22', 'd23', 'd24', 'd25', 'd26', 'd27', 'd28'],
      days29: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13', 'd14', 'd15', 'd16', 'd17', 'd18', 'd19', 'd20', 'd21', 'd22', 'd23', 'd24', 'd25', 'd26', 'd27', 'd28', 'd29'],
      days30: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13', 'd14', 'd15', 'd16', 'd17', 'd18', 'd19', 'd20', 'd21', 'd22', 'd23', 'd24', 'd25', 'd26', 'd27', 'd28', 'd29', 'd30'],
      days31: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6', 'd7', 'd8', 'd9', 'd10', 'd11', 'd12', 'd13', 'd14', 'd15', 'd16', 'd17', 'd18', 'd19', 'd20', 'd21', 'd22', 'd23', 'd24', 'd25', 'd26', 'd27', 'd28', 'd29', 'd30', 'd31'],
      dutyTable: []
    }
  },
  created () {
    request({
      method: 'post',
      url: '/duty/getnewestid',
      params: {
      }
    }).then(res => {
      console.log(res.data.data.id)
      this.newestDutyId = res.data.data.id
      console.log(this.newestDutyId)
      this.getDutyTable(this.newestDutyId)
      // this.duties = res.data.data
    }).catch((error) => {
      console.log(error)// 异常
    })
  },
  methods: {
    goback: function () {
      console.log('huitui')
      this.$router.back(-1)
    },
    dateRangeMonitor: function (startDate, endDate) {
      this.startDate = startDate
      this.endDate = endDate
    },
    enableEdit: function () {
      this.edit = !this.edit
    },
    getSpanArr (data) {
      // var begin = 0
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr0.push(1)
          this.pos = 0
        } else {
          if (data[i].crew_type === data[i - 1].crew_type) { // 判断当前元素与上一个元素是否相同
            this.spanArr0[this.pos] += 1
            this.spanArr0.push(0)
          } else { // 发现下一行元素不等了
            this.spanArr0.push(1)
            // 合并第二三列
            for (var j = this.pos; j < this.pos + this.spanArr0[this.pos]; j++) {
              if (j === this.pos) {
                this.spanArr1.push(1)
                this.spanArr2.push(1)
                this.subpos1 = this.pos
                this.subpos2 = this.pos
              } else {
                if (data[j].crew_sub_type === data[j - 1].crew_sub_type) {
                  this.spanArr1[this.subpos1] += 1
                  this.spanArr1.push(0)
                } else {
                  this.spanArr1.push(1)
                  this.subpos1 = j
                }
                if (data[j].duty_type === data[j - 1].duty_type) {
                  this.spanArr2[this.subpos2] += 1
                  this.spanArr2.push(0)
                } else {
                  this.spanArr2.push(1)
                  this.subpos2 = j
                }
              }
            }
            this.pos = i
          }
        }
      }
      for (var k = this.pos; k < this.pos + this.spanArr0[this.pos]; k++) {
        if (k === this.pos) {
          this.spanArr1.push(1)
          this.spanArr2.push(1)
          this.subpos1 = this.pos
          this.subpos2 = this.pos
        } else {
          if (data[k].duty_type === data[k - 1].duty_type) {
            this.spanArr1[this.subpos1] += 1
            this.spanArr1.push(0)
          } else {
            this.spanArr1.push(1)
            this.subpos1 = k
          }
          if (data[k].crew_sub_type === data[k - 1].crew_sub_type) {
            this.spanArr2[this.subpos2] += 1
            this.spanArr2.push(0)
          } else {
            this.spanArr2.push(1)
            this.subpos2 = k
          }
        }
      }
      // console.log(this.spanArr0)
      // console.log(this.spanArr1)
      // console.log(this.spanArr2)
    },
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr0[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // console.log(`rowspan:${_row} colspan:${_col}`)
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 3) {
        const _row = this.spanArr1[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // console.log(`rowspan:${_row} colspan:${_col}`)
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
      if (columnIndex === 4) {
        const _row = this.spanArr2[rowIndex]
        const _col = _row > 0 ? 1 : 0
        // console.log(`rowspan:${_row} colspan:${_col}`)
        return { // [0,0] 表示这一行不显示， [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    },
    openDialog (formType, editData = {}) {
      this.dialogData = {
        visibleFlag: true,
        formType,
        editData,
        dialogTitle: formType === 'add' ? '新增' : '编辑'
      }
    },
    getWeekByDate (date) {
      var weekDay = ['日', '一', '二', '三', '四', '五', '六']
      var myDate = new Date(Date.parse(this.year + '/' + this.month + '/' + date))
      // console.log(weekDay[myDate.getDay()])
      return weekDay[myDate.getDay()]
    },
    addNewDuty () {
    },
    addNewPerson () {
      this.newDutyPerson.name = this.notInTablePersonList.filter(item => item.id === this.newDutyPerson.personid)[0].name// 从notInTablePersonList里获取newDutyPerson.personid对应的人名
      // console.log('新增的人')
      // console.log(this.newDutyPerson)
      request({
        method: 'post',
        url: 'duty/addduty',
        params: {
          belong_to: this.newDutyPerson.belong_to,
          crew_type: this.newDutyPerson.crew_type,
          position: this.newDutyPerson.position,
          name: this.newDutyPerson.name,
          personid: this.newDutyPerson.personid,
          crew_sub_type: this.newDutyPerson.crew_sub_type,
          duty_type: this.newDutyPerson.duty_type
        }
      }).then(res => {
        // console.log(res)
        this.reload()
      }).catch((error) => {
        console.log(error)// 异常
      })
    },
    getDutyTable (id) {
      request({
        method: 'post',
        url: 'duty/showduty',
        params: {
          belong_to: id
        }
      }).then(res => {
        // console.log(res.data.data)
        this.dutyTable = res.data.data
        // console.log(this.dutyTable)
        this.getSpanArr(this.dutyTable)
      }).catch((error) => {
        console.log(error)// 异常
      })
    }
  }
}
</script>

<style scoped>

</style>
